<template>
    <div>
        <el-dialog
		lock-scroll
		show-close
		title="选择链接"
		:close-on-click-modal="false"
		:data="categoryData"
		width="860"
		:visible.sync="dialogVisible">
			<div class="table_box">
				<div class="left_box">
					<el-tree
					:data="categoryData"
					:props="defaultProps"
					:default-expanded-keys="[1,2,3,4]"
					:current-node-key="5"
					:highlight-current="true"
					node-key="id"
					@node-click="handleNodeClick"></el-tree>
				</div>
				<div class="right_box" v-if="currenType=='link'">
					<div v-if="basicsList.length">
						<div class="cont">基础链接</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in basicsList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="userList.length">
						<div class="cont">个人中心</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in userList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="distributionList.length">
						<div class="cont">分销</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in distributionList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
				</div>
				<div class="right_box" v-if="currenType=='marketing_link'">
					<div v-if="coupon.length">
						<div class="cont">优惠券</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in coupon" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="basicsList.length">
						<div class="cont">秒杀</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in basicsList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="distributionList.length">
						<div class="cont">砍价</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in distributionList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="userList.length">
						<div class="cont">拼团</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in userList" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="integral.length">
						<div class="cont">积分</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in integral" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
					<div v-if="luckDraw.length">
						<div class="cont">抽奖</div>
						<div class="Box">
							<div class="cont_box" :class="currenId==item.id?'on':''" v-for="(item,index) in luckDraw" :key="index" @click="getUrl(item)">{{item.name}}</div>
						</div>
					</div>
				</div>
				<div class="right_box" v-if="currenType=='special' || currenType=='product_category' || currenType=='product' || currenType=='seckill' || currenType == 'bargain' || currenType == 'combination' || currenType == 'news' || currenType == 'integral'">
					<el-form ref="formValidate" :model="formValidate" class="tabform" v-if="currenType=='product'">
						<el-row>
							<el-col :span="24">
								<el-form-item >
								<el-input
									placeholder="请输入商品名称,关键字,编号"
									v-model="formValidate.keywords"
									style="width: 250px;margin-right:20px;"/>
									<el-button type="primary">搜索</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<el-table
						row-key="id"
						ref="table"
						size="small"
						v-loading="lodingList"
						:data="tableList.list"
						@row-click="singleElection"
						:tree-props="{children: 'child', hasChildren: 'hasChildren'}"
						:max-height="currenType=='product_category'?'410':(currenType=='product' || currenType=='seckill' || currenType == 'bargain' || currenType == 'combination' || currenType == 'news' || currenType == 'integral')?'400':''"
					>
						<el-table-column label="" width="80">
							<template slot-scope="scope">
								<el-radio class="radio" v-model="radioData" :label="scope.$index">&nbsp;</el-radio>
							</template>
						</el-table-column>
						<el-table-column prop="id" label="ID" width="80"></el-table-column>
						<el-table-column label="图片" width="80">
							<template slot-scope="scope">
								<el-image style="width: 50px; height: 50px" lazy :src="scope.row.imageInput" fit="fill" v-if="currenType=='news'"></el-image>
								<el-image style="width: 50px; height: 50px" lazy :src="scope.row.extra" fit="fill" v-else-if="currenType =='product_category'"></el-image>
								<el-image style="width: 50px; height: 50px" lazy :src="scope.row.image" fit="fill" v-else></el-image>
							</template>
						</el-table-column>
    					<el-table-column prop="storeName" label="商品名称" :show-overflow-tooltip="true" max-width="250" v-if="currenType=='product'"></el-table-column>
    					<el-table-column prop="name" label="分类名称" :show-overflow-tooltip="true" max-width="250" v-else-if="currenType=='product_category'"></el-table-column>
    					<el-table-column prop="title" :label="currenType=='news' ? '文章名称' : '商品名称'" :show-overflow-tooltip="true" max-width="250" v-else></el-table-column>
					</el-table>
					<el-pagination
						:current-page="params.page"
						:page-sizes="constants.page.limit"
						:layout="constants.page.layout"
						:total="tableList.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						v-if="currenType !=='product_category'"
					/>
				</div>
				<div class="right_box" v-if="currenType=='custom'">
						<div style="width: 440px;margin: 50px 100px 0 120px">
							<el-form ref="customDate" :model="customDate" label-width="100px">
								<el-form-item label="跳转路径：" prop="url">
									<el-input v-model="customDate.url" placeholder="请输入跳转路径"/>
								</el-form-item >
							</el-form>
						</div>
				</div>
			</div>
			<div slot="footer">
				<el-button>取消</el-button>
				<el-button type="primary" @click="handleSubmit()">确定</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
	import { productLstApi, categoryApi } from "@/api/store";
	import { seckillStoreListApi, combinationListApi, bargainListApi } from "@/api/marketing";
	import {ListArticle} from "@/api/article"
	import listData from './list.json'
	import linkData from './linkData.json'
	import marketing from './marketing.json'

    export default {
        name: 'linkaddress',
        data () {
            return {
				constants: this.$constants,
                dialogVisible: false,
				defaultProps:{
					children: 'children',
          			label: 'title'
				},
				basicsList:[],
				userList:[],
				distributionList:[],
				coupon:[],
				luckDraw: [],
				integral: [],
				lodingList:false,
				categoryData:listData.data,
				currenType:'link',
				currenId:'',
				currenUrl:'',
				formValidate:{
					keywords:'',
				},
				customDate:{
					url:''
				},
				radioData:'',
				linkId:0,
				tableList:[],
				params:{
					page:1,
					limit:10,
					keywords:'',
					type:1
				},
				columns: [
					{title: "ID",key: "id",width: 60,},
					{title: "页面名称",key: "name",width: 150,},
					{title: "页面链接",key: "url"}
				],
				columns7:[
					{title: "ID",key: "id",width: 60,},
					{title: "分类名称",key: "cate_name",tree: true},
					{title: "分类图标",slot: "pic"}
				],
				columns8:[
					{title: "ID",key: "id",width: 60},
					{title: "商品图片",slot: "image",width: 90,},
					{title: "商品名称",key: "store_name"}
				],
				bargain:[
					{title: "ID",key: "id",width: 60},
					{title: "商品图片",slot: "image",width: 90,},
					{title: "商品名称",key: "title"}
				],
				news:[
					{title: "ID",key: "id",width: 60},
					{title: "文章图片",slot: "image_input",width: 90,},
					{title: "文章名称",key: "title"}
				],
            }
        },
		mounted(){
			this.mockData('link')
		},
		methods:{
			handleNodeClick(data){
				this.$set(this,'currenType',data.type);
				this.mockData(data.type)
			},
			mockData(type){
				let data = [];
				if(type == 'marketing_link'){
					data = marketing.data.list
				}else if(type == 'link'){
					data = linkData.data.list;
				}else if(type == 'product_category'){
					this.lodingList = true
					categoryApi({type:1,status:-1}).then(res=>{
						this.tableList.list = res;
						this.lodingList = false
					})
				}else if(type == 'product'){
					this.lodingList = true
					productLstApi(this.params).then(res=>{
						this.tableList = res;
						this.lodingList = false
					})
				}else if(type == 'seckill'){
					this.lodingList = true
					seckillStoreListApi(this.params).then(res=>{
						this.tableList = res;
						this.lodingList = false
					})
				}else if(type == 'bargain'){
					this.lodingList = true
					bargainListApi(this.params).then(res=>{
						this.tableList = res;
						this.lodingList = false
					})
				}else if(type == 'combination'){
					this.lodingList = true
					combinationListApi(this.params).then(res=>{
						this.tableList = res;
						this.lodingList = false
					})
				}else if(type == 'news'){
					this.lodingList = true
					ListArticle(this.params).then(res=>{
						this.tableList = res;
						this.lodingList = false
					})
				}
				let basicsList = [];
				let distributionList = [];
				let userList = [];
				let integral = [];
				let luckDraw = [];
				let coupon = [];
				data.forEach((e)=>{
					if(e.type==1){
						basicsList.push(e)
					}else if(e.type==2){
						distributionList.push(e)
					}else if(e.type==3){
						userList.push(e)
					}else if(e.type==4){
						integral.push(e)
					}else if(e.type==5){
						luckDraw.push(e)
					}else {
						coupon.push(e)
					}
				});
				this.basicsList = basicsList;
				this.distributionList = distributionList;
				this.userList = userList;
				this.coupon = coupon;
				this.luckDraw = luckDraw;
				this.integral = integral;
			},
			getUrl(item){
				this.currenId = item.id;
				this.currenUrl = item.url;
			},
			singleElection(row){
				this.linkId = row.id;
			},
			handleSubmit (name) {
				switch (this.currenType) {
					case 'product':
						this.$emit("linkUrl",'/pages/goods_details/index?id=' + this.linkId);
						break;
					case 'seckill':
						this.$emit("linkUrl",'/pages/activity/goods_seckill_details/index?id=' + this.linkId);
						break;
					case 'bargain':
						this.$emit("linkUrl",'/pages/activity/goods_bargain_details/index?id=' + this.linkId);
						break;
					case 'combination':
						this.$emit("linkUrl",'/pages/activity/goods_combination_details/index?id=' + this.linkId);
						break;
					case 'news':
						this.$emit("linkUrl",'/pages/news_details/index?id=' + this.linkId);
						break;
					case 'product_category':
						this.$emit("linkUrl",'/pages/goods_cate/goods_cate');
						break;
					case 'custom':
						this.$emit("linkUrl",this.customDate.url);
						break;
					default:
						this.$emit("linkUrl",this.currenUrl);
						break;
				}
				this.dialogVisible = false;
			},
			handleSizeChange(val) {
				this.params.limit = val;
				this.mockData(this.currenType)
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.mockData(this.currenType)
			},
		}
    }
</script>

<style scoped lang="scss">
	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}
	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb{
		-webkit-box-shadow: inset 0 0 6px #ddd;
	}
	::-webkit-scrollbar {
		width: 4px!important; /*对垂直流动条有效*/
	}
.on{
	background-color: #2d8cf0!important;
	color :#fff!important;
}
.menu-item{
	position: relative;
	display flex
	justify-content space-between
	word-break break-all
	.icon-box{
		z-index :3
		position absolute
		right 20px
		top 50%
		transform translateY(-50%)
		display none
	}
	&:hover .icon-box{
	    display: block
	}
	.right-menu{
		z-index: 10;
		position: absolute;
		right: -106px;
		top: -11px;
		width: auto;
		min-width: 121px;
	}
}

.table_box{
	margin-top: 14px;
	display: flex;
	position: relative;
	.left_box{
		width: 171px;
		height: 470px;
		border-right: 1px solid #EEEEEE;
		overflow-x: hidden;
		overflow-y: auto;
		.left_cont{
			margin-bottom: 12px;
			cursor: pointer;
		}
	}
	.right_box{
		margin-left :23px;
		font-size: 13px;
		font-family: PingFang SC;
		width: 645px;
		height: 470px;
		overflow-x: hidden;
		overflow-y :auto;
		.cont{
			font-weight: 500;
			color: #000000;
			font-weight: bold;
		}
		.Box{
			margin-top :19px;
			display: flex;
			flex-wrap: wrap;
			.cont_box{
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				background: #FAFAFA;
				border-radius: 3px;
				text-align: center;
				padding :7px 30px;
				margin-right: 10px;
				margin-bottom :18px;
				cursor: pointer;
				&:hover{
					background-color: #eee;
					color: #333;
				}
			}
			.item{
				position :relative;
				.iconfont{
					display :none;
				}
				&:hover{
					.iconfont{
						display: block;
					}
				}
			}
			.iconfont{
				position :absolute;
				right :9px;
				top:-8px;
				font-size: 18px;
				color: #333;
			}
		}

	}
	.Button{
		position: absolute;
		bottom :15px;
		right :15px;
		font-family: PingFangSC-Regular;
		text-align center
		.cancel{
			width: 70px;
			height: 32px;
			background: #FFFFFF;
			border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
			border-radius: 2px;
			font-size: 14px;
			color: #000000;
			line-height :32px;
			float :left;
			margin-right :10px;
			cursor: pointer;
		}
		.ok{
			width: 70px;
			height: 32px;
			background: #1890FF;
			border-radius: 2px;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 32px;
			float: left;
			cursor: pointer;
		}
	}
}
::v-deep .el-tree-node:focus>.el-tree-node__content{
  color: #409eff;//节点的字体颜色
}
</style>
